<template>
	<view class="count">
		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
			<view v-for="(item,index) in list" :key="index" class="Appraise">
				<view class="touxiang f f-a-c f-j-b">
					<view class="avart f f-a-c">
						<image :src="userinfo.avatar" class="avatImg" mode=""></image>
						<view class="name">
							<view class="names">
								{{userinfo.nickname}}
							</view>
							<view class="time">
								{{$u.timeFormat(item.create_time, 'yyyy-mm-dd')}}
							</view>
						</view>
					</view>
					<view class="">
						<u-rate :count="count" :disabled="true" inactive-color="#ebe2da" active-color="#977961"
							v-model="item.stars"></u-rate>
					</view>
				</view>
				<view class="conten">
					{{item.content}}
				</view>
				<view class="listImgs f f-a-c f-w-w">
					<view v-for="(ite,inde) in String(item.images).split(',')" :key="inde" class="imgList">
						<image :src="ite" class="xiaoImg" @click="previewImg(ite)" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="list.length==0" class="zanwu">
			<image src="/static/home/zanwu.png" class="img" mode=""></image>
			<view class="nameImg">
				还没有记录哦！
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 2,
				id: '',
				orderId: '',
				userinfo: uni.getStorageSync('userInfo'),
				list: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.orderId = options.orderId
			this.initList()
		},
		methods: {
			previewImg(imgurl) {
				uni.previewImage({
					current: imgurl,
					urls: [imgurl]
				});
			},
			async initList() {
				let n = await this.$api.evaluationList({
					product_id: this.id
				}, this.orderId)
				this.list = n.data
			},
			onreachBottom() {
				console.log('11111111');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zanwu {
		position: fixed;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);

		.img {
			width: 222rpx;
			height: 220rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.nameImg {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			margin-top: 10rpx;
			color: $hui;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #fffefc;
	}

	.conten {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-400;
		font-weight: 400;
		text-align: LEFT;
		color: #2f2319;
		word-wrap: break-word;
	}

	.Appraise {
		width: 100%;
		background: #fffefc;
		border-radius: 40rpx;
		margin-top: 20rpx;
		padding: 0 40rpx 0 40rpx;

		.top {
			.men {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}

			.number {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;

				.jianImg {
					width: 16rpx;
					height: 24rpx;
					margin-left: 15rpx;
				}
			}
		}
	}

	.touxiang {
		margin-top: 40rpx;

		.avatImg {
			width: 72rpx;
			height: 72rpx;
			border-radius: 36rpx;
			margin-right: 24rpx;
		}

		.name {
			.names {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
				margin-bottom: 10rpx;
			}

			.time {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
			}
		}
	}

	.listImgs {
		margin-top: 20rpx;

		.imgList {
			width: 32%;
			margin-right: 2%;
			height: 214rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 15rpx;

			&:nth-child(3n) {
				margin-right: 0%;
			}

			.xiaoImg {
				width: 100%;
				height: 100%;
				object-fit: cover;

			}
		}
	}
</style>